<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    ES6 初识 |  虎虎生辉
  </title>
  
  <link rel="shortcut icon" href="/blog/favicon.ico" />
  
  
<link rel="stylesheet" href="/blog/css/style.css">

  
<script src="/blog/js/pace.min.js"></script>


  

  

<meta name="generator" content="Hexo 6.0.0"></head>

</html>

<body>
  <div id="app">
    <main class="content">
      <section class="outer">
  <article id="post-ES6a" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  ES6 初识
</h1>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/05/01/ES6a/" class="article-date">
  <time datetime="2018-04-30T16:00:00.000Z" itemprop="datePublished">2018-05-01</time>
</a>
      
    </div>
    

    
    
    <div class="tocbot"></div>





    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="一、工具-babel-优雅降级"><a href="#一、工具-babel-优雅降级" class="headerlink" title="一、工具 babel 优雅降级"></a>一、工具 babel 优雅降级</h1><ul>
<li>npm init -y</li>
<li>npm install @babel/core</li>
<li>npm install @babel/preset-env</li>
<li>npm install @babel/cli</li>
<li>create .babelrc</li>
<li>npx babel origin -o target</li>
<li>npx babel origin -o target –watch</li>
</ul>
<h1 id="二、变量声明"><a href="#二、变量声明" class="headerlink" title="二、变量声明"></a>二、变量声明</h1><h3 id="1-var-特点"><a href="#1-var-特点" class="headerlink" title="1.var 特点"></a>1.var 特点</h3><ul>
<li>变量会声明提升，允许先使用后声明</li>
<li>语法松散，重复声明变量不会报错，会覆盖</li>
<li>全局变量会挂载 window</li>
<li>函数局部作用域容易产生闭包</li>
</ul>
<h3 id="2-let-特点"><a href="#2-let-特点" class="headerlink" title="2.let 特点"></a>2.let 特点</h3><ul>
<li>不会变量声明提升，需先声明后使用</li>
<li>不得重复声明</li>
<li>不会挂载全局 window 属性</li>
<li>与大括号{}配合使用形成块级作用域<br><strong>临时死区</strong></li>
<li>称霸当前块级作用域（只要有就必须使用当前块内的变量）</li>
<li>而且声明之前不允许使用，也不使用外部同名变量</li>
<li>具有识别块级作用域的能力</li>
</ul>
<h3 id="3-const-特点"><a href="#3-const-特点" class="headerlink" title="3.const 特点"></a>3.const 特点</h3><ul>
<li>声明常量，常量名建议大写</li>
<li>在声明时就必须初始化值</li>
<li>存储常量的空间里面的值不能发生改变</li>
<li>如若值是原始类型，则无法改变</li>
<li>如若值是引用类型，则地址无法改变</li>
<li>具有识别块级作用域的能力</li>
</ul>
<h1 id="三、运算符"><a href="#三、运算符" class="headerlink" title="三、运算符"></a>三、运算符</h1><h2 id="（一）拓展运算符…"><a href="#（一）拓展运算符…" class="headerlink" title="（一）拓展运算符…"></a>（一）拓展运算符…</h2><h3 id="1-es6-操作数组"><a href="#1-es6-操作数组" class="headerlink" title="1.es6 操作数组"></a>1.es6 操作数组</h3><ul>
<li>写的时候起收集作用</li>
<li>读的时候起展开作用</li>
<li>在做形参的时候，必须是最后一个</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="comment">//展开</span></span><br><span class="line">count(...arr); <span class="comment">//count(1,2,3,4,5)</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">count</span>(<span class="params">a, b, ...arg</span>) </span>&#123;</span><br><span class="line">  <span class="comment">//收集</span></span><br><span class="line">  <span class="built_in">console</span>.log(a, b, arg); <span class="comment">//1, 2, [3,4,5]</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-es7-操作对象"><a href="#2-es7-操作对象" class="headerlink" title="2.es7 操作对象"></a>2.es7 操作对象</h3><ul>
<li>读对象展开大括号作用</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj1 = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">b</span>: <span class="number">2</span>,</span><br><span class="line">  <span class="attr">c</span>: <span class="number">3</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//展开</span></span><br><span class="line"><span class="keyword">let</span> obj2 = &#123;</span><br><span class="line">  ...obj1</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="（二）解构赋值"><a href="#（二）解构赋值" class="headerlink" title="（二）解构赋值"></a>（二）解构赋值</h2><h3 id="1-解构对象"><a href="#1-解构对象" class="headerlink" title="1.解构对象"></a>1.解构对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">b</span>: <span class="number">2</span>,</span><br><span class="line">  <span class="attr">c</span>: <span class="number">3</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//展开</span></span><br><span class="line"><span class="keyword">let</span> &#123; <span class="attr">a</span>: one, <span class="attr">b</span>: two, <span class="attr">c</span>: three, four = <span class="number">4</span> &#125; = obj;</span><br><span class="line"><span class="built_in">console</span>.log(one, two, three, four); <span class="comment">//1、2、3、4</span></span><br></pre></td></tr></table></figure>

<h3 id="2-解构数组"><a href="#2-解构数组" class="headerlink" title="2.解构数组"></a>2.解构数组</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="keyword">let</span> [one, two, three] = arr;</span><br><span class="line"><span class="built_in">console</span>.log(one, two, three); <span class="comment">//1、2、3</span></span><br></pre></td></tr></table></figure>

<h2 id="（三）默认赋值"><a href="#（三）默认赋值" class="headerlink" title="（三）默认赋值"></a>（三）默认赋值</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">count</span>(<span class="params">a = <span class="number">1</span>, b = <span class="number">2</span></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a + b);</span><br><span class="line">&#125;</span><br><span class="line">count(<span class="number">10</span>); <span class="comment">//12</span></span><br></pre></td></tr></table></figure>

<h1 id="四、箭头函数"><a href="#四、箭头函数" class="headerlink" title="四、箭头函数"></a>四、箭头函数</h1><h3 id="1-存储"><a href="#1-存储" class="headerlink" title="1.存储"></a>1.存储</h3><ul>
<li>必须有空间存储，变量、数组、对象属性等</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> count = <span class="function">() =&gt;</span> &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="2-参数"><a href="#2-参数" class="headerlink" title="2.参数"></a>2.参数</h3><ul>
<li>当只有一个形参的时候，可以胜率圆括号</li>
<li>多个形参名不能相同（报错）</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> count = <span class="function"><span class="params">a</span> =&gt;</span> &#123;&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="4-返回值"><a href="#4-返回值" class="headerlink" title="4.返回值"></a>4.返回值</h3><ul>
<li>可以省略 return 关键字，省略大括号，直接写在箭头后</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> count1 = <span class="function">(<span class="params">a, b</span>) =&gt;</span> a + b;</span><br><span class="line"><span class="keyword">let</span> count2 = <span class="function">(<span class="params">a, b</span>) =&gt;</span> [a, b];</span><br><span class="line"><span class="keyword">let</span> count3 = <span class="function">(<span class="params">a, b</span>) =&gt;</span> (&#123; <span class="attr">a</span>: a, <span class="attr">b</span>: b &#125;);</span><br><span class="line"><span class="keyword">let</span> count4 = <span class="function">(<span class="params">a, b</span>) =&gt;</span> <span class="function"><span class="params">a</span> =&gt;</span> a / <span class="number">2</span>;</span><br></pre></td></tr></table></figure>

<h3 id="5-arguments-this-指向"><a href="#5-arguments-this-指向" class="headerlink" title="5.arguments/this 指向"></a>5.arguments/this 指向</h3><ul>
<li>arguments 由定义时外层最接近的非箭头函数的 arguments 决定</li>
<li>this 由定义时外层最接近的非箭头函数的 this 决定</li>
<li>全局定义的箭头函数的 arguments 未定义</li>
<li>全局定义的箭头函数的 this 指向 window</li>
</ul>
<h1 id="五、数据劫持"><a href="#五、数据劫持" class="headerlink" title="五、数据劫持"></a>五、数据劫持</h1><h3 id="1-数据描述符"><a href="#1-数据描述符" class="headerlink" title="1.数据描述符"></a>1.数据描述符</h3><ul>
<li>value 属性值默认 undefined</li>
<li>writable 可写默认 false</li>
<li>configurable 可配置默认 false</li>
<li>enumerable 可枚举默认 false<br><strong>自然创建的对象，数据描述符默认都是 true</strong></li>
</ul>
<h3 id="2-存取描述符"><a href="#2-存取描述符" class="headerlink" title="2.存取描述符"></a>2.存取描述符</h3><ul>
<li>get 的返回值对应 value</li>
<li>设置的值作为实参对应 set 的形参</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  <span class="attr">tempValue</span>: <span class="string">&quot;abc&quot;</span>,</span><br><span class="line">  <span class="keyword">set</span> <span class="title">name</span>()&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">this</span>.tempValue;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="keyword">get</span> <span class="title">name</span>(<span class="params">value</span>)&#123;</span><br><span class="line">    <span class="built_in">this</span>.tempValue = value;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.name<span class="comment">//&quot;abc&quot;</span></span><br><span class="line">obj.name = <span class="number">10</span>;</span><br><span class="line">obj.name<span class="comment">//10</span></span><br></pre></td></tr></table></figure>

<h3 id="3-Proxy-amp-Reflect-代理植入"><a href="#3-Proxy-amp-Reflect-代理植入" class="headerlink" title="3.Proxy&amp;Reflect 代理植入"></a>3.Proxy&amp;Reflect 代理植入</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> data = &#123;</span><br><span class="line">  <span class="attr">value</span>: <span class="number">10</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> proxyData = <span class="keyword">new</span> <span class="built_in">Proxy</span>(data, &#123;</span><br><span class="line">  <span class="comment">//写</span></span><br><span class="line">  <span class="function"><span class="title">set</span>(<span class="params">target, key, value, receiver</span>)</span> &#123;</span><br><span class="line">    <span class="built_in">Reflect</span>.set(target, key, value);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//读</span></span><br><span class="line">  <span class="function"><span class="title">get</span>(<span class="params">target, key, receiver</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Reflect</span>.get(target, key);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//in</span></span><br><span class="line">  <span class="function"><span class="title">has</span>(<span class="params">target, key</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//delete</span></span><br><span class="line">  <span class="function"><span class="title">deleteProperty</span>(<span class="params"></span>)</span> &#123;&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h1 id="六、类-Class"><a href="#六、类-Class" class="headerlink" title="六、类 Class"></a>六、类 Class</h1><h3 id="1-定义"><a href="#1-定义" class="headerlink" title="1.定义"></a>1.定义</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Father</span> </span>&#123;</span><br><span class="line">  <span class="comment">//实例对象的属性</span></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name, age</span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name;</span><br><span class="line">    <span class="built_in">this</span>.age = age;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//原型上的方法</span></span><br><span class="line">  <span class="function"><span class="title">say</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(</span><br><span class="line">      <span class="string">`my name is <span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>, I am a <span class="subst">$&#123;<span class="built_in">this</span>.sex&#125;</span>, I am <span class="subst">$&#123;<span class="built_in">this</span>.age&#125;</span> years old!`</span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//静态方法</span></span><br><span class="line">  <span class="keyword">static</span> <span class="function"><span class="title">tell</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my name is <span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>, I am <span class="subst">$&#123;<span class="built_in">this</span>.age&#125;</span> years old!`</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//ES7实例对象的属性</span></span><br><span class="line">  sex = <span class="string">&quot;boy&quot;</span>;</span><br><span class="line">  <span class="comment">//ES7静态属性</span></span><br><span class="line">  <span class="keyword">static</span> age = <span class="number">30</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> son1 = <span class="keyword">new</span> Father(<span class="string">&quot;son1&quot;</span>, <span class="number">10</span>);</span><br><span class="line"><span class="keyword">let</span> son2 = <span class="keyword">new</span> Father(<span class="string">&quot;son2&quot;</span>, <span class="number">5</span>);</span><br><span class="line">son1.say(); <span class="comment">//my name is son1, I am a boy, I am 10 years old!</span></span><br><span class="line">son2.say(); <span class="comment">//my name is son2, I am a boy, I am 5 years old!</span></span><br><span class="line">Father.tell(); <span class="comment">//my name is Father, I am 30 years old!</span></span><br></pre></td></tr></table></figure>

<h3 id="2-继承"><a href="#2-继承" class="headerlink" title="2.继承"></a>2.继承</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Grandpa</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">hair = <span class="string">&quot;黑发&quot;</span>, eyes = <span class="string">&quot;黑眼睛&quot;</span>, noes = <span class="string">&quot;高鼻梁&quot;</span></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.hair = hair;</span><br><span class="line">    <span class="built_in">this</span>.eyes = eyes;</span><br><span class="line">    <span class="built_in">this</span>.noes = noes;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">say</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my name is <span class="subst">$&#123;<span class="built_in">this</span>.name&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my age is <span class="subst">$&#123;<span class="built_in">this</span>.age&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my skin is <span class="subst">$&#123;<span class="built_in">this</span>.skin&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my eyelid is <span class="subst">$&#123;<span class="built_in">this</span>.eyelid&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my eyes is <span class="subst">$&#123;<span class="built_in">this</span>.eyes&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my noes is <span class="subst">$&#123;<span class="built_in">this</span>.noes&#125;</span>`</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`my hair is <span class="subst">$&#123;<span class="built_in">this</span>.hair&#125;</span>`</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Father</span> <span class="keyword">extends</span> <span class="title">Grandpa</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">skin = <span class="string">&quot;黄皮肤&quot;</span>, eyelid = <span class="string">&quot;双眼皮&quot;</span></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">super</span>();</span><br><span class="line">    <span class="built_in">this</span>.skin = skin;</span><br><span class="line">    <span class="built_in">this</span>.eyelid = eyelid;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Son</span> <span class="keyword">extends</span> <span class="title">Father</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name, age, skin, eyelid</span>)</span> &#123;</span><br><span class="line">    <span class="built_in">super</span>(skin, eyelid);</span><br><span class="line">    <span class="built_in">this</span>.name = name;</span><br><span class="line">    <span class="built_in">this</span>.age = age;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> son1 = <span class="keyword">new</span> Son(<span class="string">&quot;son1&quot;</span>, <span class="number">10</span>, <span class="string">&quot;黑皮肤&quot;</span>, <span class="string">&quot;单眼皮&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> son2 = <span class="keyword">new</span> Son(<span class="string">&quot;son2&quot;</span>, <span class="number">20</span>, <span class="string">&quot;白皮肤&quot;</span>, <span class="string">&quot;双眼皮&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="3-ES5-模拟-Class"><a href="#3-ES5-模拟-Class" class="headerlink" title="3.ES5 模拟 Class"></a>3.ES5 模拟 Class</h3><h3 id="4-ES7-提案（装饰器）"><a href="#4-ES7-提案（装饰器）" class="headerlink" title="4.ES7 提案（装饰器）"></a>4.ES7 提案（装饰器）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//.babelrc</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;presets&quot;</span>: [</span><br><span class="line">    <span class="string">&quot;@babel/preset-env&quot;</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="string">&quot;plugins&quot;</span>: [</span><br><span class="line">    [<span class="string">&quot;@babel/plugin-proposal-decorators&quot;</span>, &#123;<span class="string">&quot;legacy&quot;</span>: <span class="literal">true</span>&#125;],</span><br><span class="line">    [<span class="string">&quot;@babel/plugin-proposal-class-properties&quot;</span>, &#123;<span class="string">&quot;loose&quot;</span>: <span class="literal">true</span>&#125;]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//class</span></span><br><span class="line"><span class="comment">//面向对象+面向切面</span></span><br><span class="line"><span class="keyword">let</span> inp = <span class="built_in">document</span>.querySelector(<span class="string">&quot;.inp&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&quot;.btn&quot;</span>);</span><br><span class="line"></span><br><span class="line">@Skin</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Search</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.keyWords = <span class="string">&quot;&quot;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  @myReadOnly</span><br><span class="line">  urlA = <span class="string">&quot;urlA-&quot;</span>;</span><br><span class="line">  @dealData(<span class="string">&quot;张三&quot;</span>)</span><br><span class="line">  <span class="function"><span class="title">getContent</span>(<span class="params">data,a,b</span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;data&#125;</span>向<span class="subst">$&#123;<span class="built_in">this</span>.urlA&#125;</span>发送网络请求，数据：<span class="subst">$&#123;<span class="built_in">this</span>.keyWords&#125;</span>`</span>, a, b);</span><br><span class="line">    <span class="keyword">return</span> <span class="number">10</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//装饰私有属性</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myReadOnly</span>(<span class="params">prototype, key, descriptor</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(prototype, key, descriptor);</span><br><span class="line">  descriptor.writable = <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* //装饰原型属性</span></span><br><span class="line"><span class="comment">function dealData(prototype, key, descriptor)&#123;</span></span><br><span class="line"><span class="comment">  console.log(prototype, key, descriptor);</span></span><br><span class="line"><span class="comment">  let oldValue = descriptor.value;</span></span><br><span class="line"><span class="comment">  descriptor.value = function ()&#123;</span></span><br><span class="line"><span class="comment">    let urlB = &quot;urlB-&quot;;</span></span><br><span class="line"><span class="comment">    console.log(`向$&#123;urlB&#125;发送网络请求，数据：$&#123;this.keyWords&#125;`);</span></span><br><span class="line"><span class="comment">    return oldValue.apply(this, arguments);</span></span><br><span class="line"><span class="comment">  &#125;</span></span><br><span class="line"><span class="comment">&#125; */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//装饰原型属性</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">dealData</span>(<span class="params">data</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">prototype, key, descriptor</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(prototype, key, descriptor);</span><br><span class="line">    <span class="keyword">let</span> oldValue = descriptor.value;</span><br><span class="line">    descriptor.value = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">let</span> urlB = <span class="string">&quot;urlB-&quot;</span>;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;data&#125;</span>向<span class="subst">$&#123;urlB&#125;</span>发送网络请求，数据：<span class="subst">$&#123;<span class="built_in">this</span>.keyWords&#125;</span>`</span>);</span><br><span class="line">      <span class="keyword">return</span> oldValue.call(<span class="built_in">this</span>, data, ...arguments);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//装饰类</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Skin</span>(<span class="params">target</span>) </span>&#123;</span><br><span class="line">  target.aa = <span class="number">30</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> os = <span class="keyword">new</span> Search();</span><br><span class="line">inp.oninput = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  os.keyWords = <span class="built_in">this</span>.value;</span><br><span class="line">&#125;</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  os.getContent(<span class="number">1</span>,<span class="number">2</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h1 id="七、数据存储"><a href="#七、数据存储" class="headerlink" title="七、数据存储"></a>七、数据存储</h1><h2 id="（一）Set"><a href="#（一）Set" class="headerlink" title="（一）Set"></a>（一）Set</h2><h3 id="1-创建-new-Set-data"><a href="#1-创建-new-Set-data" class="headerlink" title="1.创建 new Set(data)"></a>1.创建 new Set(data)</h3><ul>
<li>产生一个类似数组的机构，里面的值唯一</li>
<li>data 具备迭代接口的数据</li>
<li>Set 只存储唯一 value，不存储 key</li>
</ul>
<h3 id="2-原型方法"><a href="#2-原型方法" class="headerlink" title="2.原型方法"></a>2.原型方法</h3><ul>
<li>add(value)添加数据</li>
<li>delete(value)删除数据==value 必须与存储的一致否则删除不了（字面量形式就删除不了，用变量接受，存储变量）==</li>
<li>clear()清空数据</li>
<li>has(value)检测数据 true/false</li>
</ul>
<h3 id="3-遍历"><a href="#3-遍历" class="headerlink" title="3.遍历"></a>3.遍历</h3><ul>
<li>for…of 遍历迭代接口的数据</li>
<li>forEach 方法</li>
</ul>
<h3 id="4-转换"><a href="#4-转换" class="headerlink" title="4.转换"></a>4.转换</h3><ul>
<li>Array.form(Set)</li>
<li>[…Set]</li>
</ul>
<h3 id="5-应用"><a href="#5-应用" class="headerlink" title="5.应用"></a>5.应用</h3><ul>
<li>去重</li>
<li>差集</li>
<li>交集</li>
<li>并集</li>
</ul>
<h2 id="（二）Map"><a href="#（二）Map" class="headerlink" title="（二）Map"></a>（二）Map</h2><h3 id="1-创建-new-Map-key-value"><a href="#1-创建-new-Map-key-value" class="headerlink" title="1.创建 new Map([[key, value]])"></a>1.创建 new Map([[key, value]])</h3><ul>
<li>“做字典”</li>
<li>data 具备迭代接口的数据</li>
<li>Map 存储唯一 key-value 键值对</li>
<li>key 可以是任何形式</li>
</ul>
<h3 id="2-原型方法-1"><a href="#2-原型方法-1" class="headerlink" title="2.原型方法"></a>2.原型方法</h3><ul>
<li>Map(key, value)添加数据</li>
<li>get(key)获取数据==key 必须与存储的一致否则获取不了（字面量形式就获取不了，用变量接受，存储变量）==</li>
<li>delete(key)删除数据</li>
<li>keys()获取所有的键</li>
<li>has(key)检测数据</li>
</ul>
<h3 id="3-遍历-1"><a href="#3-遍历-1" class="headerlink" title="3.遍历"></a>3.遍历</h3><ul>
<li>for…of 遍历迭代接口的数据</li>
<li>forEach 方法</li>
</ul>
<h3 id="4-模拟（链接列表-桶、hash-算法）"><a href="#4-模拟（链接列表-桶、hash-算法）" class="headerlink" title="4.模拟（链接列表/*桶、hash 算法）"></a>4.模拟（链接列表/*桶、hash 算法）</h3><h1 id="八、异步编程"><a href="#八、异步编程" class="headerlink" title="八、异步编程"></a>八、异步编程</h1><h2 id="（一）Promise"><a href="#（一）Promise" class="headerlink" title="（一）Promise"></a>（一）Promise</h2><h3 id="1-执行顺序"><a href="#1-执行顺序" class="headerlink" title="1.执行顺序"></a>1.执行顺序</h3><ul>
<li>宏任务: 计时器、事件、ajax</li>
<li>微任务：Promise<ul>
<li>微任务有优先执行权</li>
</ul>
</li>
</ul>
<h3 id="2-使用"><a href="#2-使用" class="headerlink" title="2.使用"></a>2.使用</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//Promise对象，需要一个回调函数作为参数</span></span><br><span class="line"><span class="keyword">let</span> op = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//注册成功、失败函数</span></span><br><span class="line"><span class="comment">//返回值会向后传递</span></span><br><span class="line"><span class="comment">//此次的错误会被下一次的then的失败函数或catch捕获到</span></span><br><span class="line"><span class="comment">//此次若没有错误，则下次会执行成功函数</span></span><br><span class="line">op.then(</span><br><span class="line">  <span class="function"><span class="params">resolveData</span> =&gt;</span> &#123;&#125;,</span><br><span class="line">  <span class="function"><span class="params">rejectData</span> =&gt;</span> &#123;&#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">//捕获异常</span></span><br><span class="line"><span class="comment">//如果then在此之前捕获过，则不会捕获掉</span></span><br><span class="line"><span class="comment">//返回值不会传递</span></span><br><span class="line">op.catch(<span class="function"><span class="params">err</span> =&gt;</span> &#123;&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//全部成功才成功，只要有一个promise失败就失败</span></span><br><span class="line"><span class="comment">//谁失败就用谁的</span></span><br><span class="line"><span class="comment">//全部成功就将参数统一成一个数组</span></span><br><span class="line">op.all([promise(), promise(), promise()]).then();</span><br><span class="line"></span><br><span class="line"><span class="comment">//只要有一个promise成功就成功，只要有一个promise失败就失败</span></span><br><span class="line"><span class="comment">//谁先成功就用谁的</span></span><br><span class="line"><span class="comment">//谁先失败就用谁的</span></span><br><span class="line">op.race([promise(), promise(), promise()]).then();</span><br></pre></td></tr></table></figure>

<h3 id="3-模拟"><a href="#3-模拟" class="headerlink" title="3.模拟"></a>3.模拟</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyPromise</span>(<span class="params">syncFn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">  self.status = <span class="string">&quot;pending&quot;</span>; <span class="comment">//进行中</span></span><br><span class="line">  <span class="comment">//处理参数</span></span><br><span class="line">  self.resolveValue = <span class="literal">null</span>;</span><br><span class="line">  self.rejectReason = <span class="literal">null</span>;</span><br><span class="line">  <span class="comment">//处理异步</span></span><br><span class="line">  self.resolveCallBackList = [];</span><br><span class="line">  self.rejectCallBackList = [];</span><br><span class="line">  <span class="comment">//执行成功回调</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">resolve</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (self.status === <span class="string">&quot;pending&quot;</span>) &#123;</span><br><span class="line">      self.status = <span class="string">&quot;fulfilled&quot;</span>; <span class="comment">//已成功</span></span><br><span class="line">      self.resolveValue = value; <span class="comment">//处理参数</span></span><br><span class="line">      self.resolveCallBackList.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">res</span>) </span>&#123; <span class="comment">//处理异步</span></span><br><span class="line">        res();</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//执行失败回调</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">reject</span>(<span class="params">reason</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (self.status === <span class="string">&quot;pending&quot;</span>) &#123;</span><br><span class="line">      self.status = <span class="string">&quot;rejected&quot;</span>; <span class="comment">//已失败</span></span><br><span class="line">      self.rejectReason = reason; <span class="comment">//处理参数</span></span><br><span class="line">      self.rejectCallBackList.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">rej</span>) </span>&#123; <span class="comment">//处理异步</span></span><br><span class="line">        rej();</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//捕获syncFn中抛出的错误</span></span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    syncFn(resolve, reject);</span><br><span class="line">  &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">    reject(error); <span class="comment">//抛出错误，即已失败</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//处理then手动返回promise</span></span><br><span class="line">MyPromise.prototype.then = <span class="function"><span class="keyword">function</span> (<span class="params">onFulfilled, onRejected</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">  onFulfilled = onFulfilled || <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> value;</span><br><span class="line">  &#125;</span><br><span class="line">  onRejected = onRejected || <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(reason);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//处理返回值promise</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">processor</span>(<span class="params">returnValue, nextFn, nextRes, nextRej</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (returnValue <span class="keyword">instanceof</span> MyPromise) &#123;</span><br><span class="line">      returnValue.then(<span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span><br><span class="line">        nextRes(value);</span><br><span class="line">      &#125;, <span class="function"><span class="keyword">function</span> (<span class="params">reason</span>) </span>&#123;</span><br><span class="line">        nextRej(reason);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      nextFn(returnValue);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//异步函数</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">makeAsync</span>(<span class="params">onFn, value, nextFn, nextRes, nextRej</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">var</span> returnValue = onFn(value);</span><br><span class="line">        processor(returnValue, nextFn, nextRes, nextRej); <span class="comment">//处理返回值promise</span></span><br><span class="line">      &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        nextRej(error)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;, <span class="number">0</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> nextPromise = <span class="keyword">new</span> MyPromise(<span class="function"><span class="keyword">function</span> (<span class="params">res, rej</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (self.status === <span class="string">&quot;fulfilled&quot;</span>) &#123;</span><br><span class="line">      makeAsync(onFulfilled, self.resolveValue, res, res, rej);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (self.status === <span class="string">&quot;rejected&quot;</span>) &#123;</span><br><span class="line">      makeAsync(onRejected, self.rejectReason, rej, res, rej);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (self.status === <span class="string">&quot;pending&quot;</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="keyword">typeof</span> (onFulfilled) === <span class="string">&quot;function&quot;</span>) &#123;</span><br><span class="line">        self.resolveCallBackList.push(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">          makeAsync(onFulfilled, self.resolveValue, res, res, rej);</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">if</span> (<span class="keyword">typeof</span> (onRejected) === <span class="string">&quot;function&quot;</span>) &#123;</span><br><span class="line">        self.rejectCallBackList.push(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">          makeAsync(onRejected, self.rejectReason, rej, res, rej);</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> nextPromise;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.race = <span class="function"><span class="keyword">function</span>(<span class="params">promiseArr</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function"><span class="keyword">function</span>(<span class="params">res, rej</span>)</span>&#123;</span><br><span class="line">    promiseArr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">promise</span>)</span>&#123;</span><br><span class="line">      promise.then(res, rej);</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">MyPromise.all = <span class="function"><span class="keyword">function</span>(<span class="params">promiseArr</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> values = [];</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> MyPromise(<span class="function"><span class="keyword">function</span>(<span class="params">res, rej</span>)</span>&#123;</span><br><span class="line">    promiseArr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">promise</span>)</span>&#123;</span><br><span class="line">      promise.then(<span class="function"><span class="keyword">function</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">        values.push(value);</span><br><span class="line">        <span class="keyword">if</span>(values.length === promiseArr.length)&#123;</span><br><span class="line">          res(values);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;, <span class="function"><span class="keyword">function</span>(<span class="params">reason</span>)</span>&#123;</span><br><span class="line">        rej(reason);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="4-promisify-化"><a href="#4-promisify-化" class="headerlink" title="4.promisify 化"></a>4.promisify 化</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">promisify</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">...arg</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res, rej</span>) =&gt;</span> &#123;</span><br><span class="line">      func(...arg, <span class="function">(<span class="params">err, data</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (err) &#123;</span><br><span class="line">          rej(err);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          res(data);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">promisfyAll</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">    <span class="keyword">let</span> fn = obj[key];</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> fn === <span class="string">&quot;function&quot;</span>) &#123;</span><br><span class="line">      obj[key + <span class="string">&quot;Async&quot;</span>] = promisify(fn);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> read = promisify(fs.readFile);</span><br><span class="line"></span><br><span class="line">read(<span class="string">&quot;./data/number.txt&quot;</span>, <span class="string">&quot;utf-8&quot;</span>).then(<span class="function"><span class="params">val</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(val);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">promisfyAll(fs);</span><br><span class="line">fs.readFileAsync(<span class="string">&quot;./data/number.txt&quot;</span>, <span class="string">&quot;utf-8&quot;</span>).then(<span class="function"><span class="params">val</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;asyn:&quot;</span>, val);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// let bluebird = require(&quot;bluebird&quot;);</span></span><br><span class="line"><span class="comment">// bluebird.promisify();</span></span><br><span class="line"><span class="comment">// bluebird.promisifyAll();</span></span><br></pre></td></tr></table></figure>
<hr>
<h2 id="（二）Iterator-迭代器"><a href="#（二）Iterator-迭代器" class="headerlink" title="（二）Iterator 迭代器"></a>（二）Iterator 迭代器</h2><h3 id="1-Symbol-数据类型"><a href="#1-Symbol-数据类型" class="headerlink" title="1.Symbol 数据类型"></a>1.Symbol 数据类型</h3><h4 id="（1）特点"><a href="#（1）特点" class="headerlink" title="（1）特点"></a>（1）特点</h4><ul>
<li>唯一性</li>
<li>可作为对象的属性</li>
<li>静态方法 Symbol.iterator</li>
</ul>
<h4 id="（2）添加迭代器"><a href="#（2）添加迭代器" class="headerlink" title="（2）添加迭代器"></a>（2）添加迭代器</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  <span class="number">0</span>: <span class="string">&quot;a&quot;</span>,</span><br><span class="line">  <span class="number">1</span>: <span class="string">&quot;b&quot;</span>,</span><br><span class="line">  <span class="number">2</span>: <span class="string">&quot;c&quot;</span>,</span><br><span class="line">  <span class="attr">length</span>: <span class="number">3</span>,</span><br><span class="line">  [<span class="built_in">Symbol</span>.iterator]: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> curIndex = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">let</span> next = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="attr">value</span>: <span class="built_in">this</span>[curIndex],</span><br><span class="line">        <span class="attr">done</span>: <span class="built_in">this</span>.length === curIndex++</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      next</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log([...obj]);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> prop <span class="keyword">of</span> obj) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(prop);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="2-Generator-生成器"><a href="#2-Generator-生成器" class="headerlink" title="2.Generator 生成器"></a>2.Generator 生成器</h3><h4 id="（1）特点-1"><a href="#（1）特点-1" class="headerlink" title="（1）特点"></a>（1）特点</h4><ul>
<li>在 function 关键字与函数名之间加*,即为生成器</li>
<li>通过普通执行创建迭代器对象（==非 new==）</li>
<li>通过 yield 关键字控制分段执行</li>
</ul>
<h4 id="（2）使用"><a href="#（2）使用" class="headerlink" title="（2）使用"></a>（2）使用</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">Test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> data1 = <span class="keyword">yield</span> <span class="string">&quot;a&quot;</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(data1);</span><br><span class="line">  <span class="keyword">let</span> data2 = <span class="keyword">yield</span> <span class="string">&quot;b&quot;</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(data2);</span><br><span class="line">  <span class="keyword">let</span> data3 = <span class="keyword">yield</span> <span class="string">&quot;c&quot;</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(data3);</span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;d&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> oG = Test();</span><br><span class="line"><span class="built_in">console</span>.log(oG.next(<span class="string">&quot;0&quot;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(oG.next(<span class="string">&quot;1&quot;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(oG.next(<span class="string">&quot;2&quot;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(oG.next(<span class="string">&quot;3&quot;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(oG.next(<span class="string">&quot;4&quot;</span>));</span><br></pre></td></tr></table></figure>

<h4 id="（3）执行原理"><a href="#（3）执行原理" class="headerlink" title="（3）执行原理"></a>（3）执行原理</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">Test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">yield</span> <span class="string">&quot;a&quot;</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> data1 &lt;== next(<span class="string">&quot;1&quot;</span>)</span><br><span class="line">  <span class="built_in">console</span>.log(data1) ==&gt; <span class="string">&quot;1&quot;</span></span><br><span class="line">   <span class="keyword">yield</span> <span class="string">&quot;b&quot;</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> data2 &lt;== next(<span class="string">&quot;2&quot;</span>)</span><br><span class="line">  <span class="built_in">console</span>.log(data2) ==&gt; <span class="string">&quot;2&quot;</span></span><br><span class="line">   <span class="keyword">yield</span> <span class="string">&quot;c&quot;</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> data3 &lt;== next(<span class="string">&quot;3&quot;</span>)</span><br><span class="line">  <span class="built_in">console</span>.log(data3) ==&gt; <span class="string">&quot;3&quot;</span></span><br><span class="line">  <span class="keyword">return</span> <span class="string">&quot;d&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="（4）应用"><a href="#（4）应用" class="headerlink" title="（4）应用"></a>（4）应用</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  <span class="number">0</span>: <span class="string">&quot;a&quot;</span>,</span><br><span class="line">  <span class="number">1</span>: <span class="string">&quot;b&quot;</span>,</span><br><span class="line">  <span class="number">2</span>: <span class="string">&quot;c&quot;</span>,</span><br><span class="line">  <span class="attr">length</span>: <span class="number">3</span>,</span><br><span class="line">  [<span class="built_in">Symbol</span>.iterator]: <span class="function"><span class="keyword">function</span>*(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> curIndex = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">while</span> (curIndex &lt; <span class="built_in">this</span>.length) &#123;</span><br><span class="line">      <span class="keyword">yield</span> <span class="built_in">this</span>[curIndex++];</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">console</span>.log([...obj]);</span><br></pre></td></tr></table></figure>

<hr>
<h2 id="（三）解决回调地狱"><a href="#（三）解决回调地狱" class="headerlink" title="（三）解决回调地狱"></a>（三）解决回调地狱</h2><h3 id="1-CallBack（jQuery）"><a href="#1-CallBack（jQuery）" class="headerlink" title="1.CallBack（jQuery）"></a>1.CallBack（jQuery）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">jQuery.myCallback = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> options = <span class="built_in">arguments</span>[<span class="number">0</span>] || <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="keyword">var</span> list = [];</span><br><span class="line">  <span class="keyword">var</span> fired = <span class="literal">false</span>;</span><br><span class="line">  <span class="keyword">var</span> fireIndex = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">var</span> params = [];</span><br><span class="line">  <span class="keyword">var</span> call = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">for</span>(; fireIndex &lt; list.length; fireIndex++)&#123;</span><br><span class="line">      list[fireIndex].apply(<span class="built_in">window</span>, params);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span>(options.includes(<span class="string">&quot;once&quot;</span>))&#123;</span><br><span class="line">      list = [];</span><br><span class="line">      fireIndex = <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="function"><span class="title">add</span>(<span class="params">fn</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">typeof</span> fn === <span class="string">&quot;function&quot;</span> &amp;&amp; list.push(fn);</span><br><span class="line">      <span class="keyword">if</span>(options.includes(<span class="string">&quot;memory&quot;</span>) &amp;&amp; fired)&#123;</span><br><span class="line">        call();</span><br><span class="line">        fireIndex = <span class="number">0</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">fire</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      fireIndex = <span class="number">0</span>;</span><br><span class="line">      params = <span class="built_in">arguments</span>;</span><br><span class="line">      fired = <span class="literal">true</span>;</span><br><span class="line">      call();</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="2-Deferred（jQuery）"><a href="#2-Deferred（jQuery）" class="headerlink" title="2.Deferred（jQuery）"></a>2.Deferred（jQuery）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">jQuery.myDeferred = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> dfArr = [</span><br><span class="line">      [$.myCallback(<span class="string">&quot;once memory&quot;</span>), <span class="string">&quot;done&quot;</span>, <span class="string">&quot;resolve&quot;</span>],</span><br><span class="line">      [$.myCallback(<span class="string">&quot;once memory&quot;</span>), <span class="string">&quot;fail&quot;</span>, <span class="string">&quot;reject&quot;</span>],</span><br><span class="line">      [$.myCallback(<span class="string">&quot;memory&quot;</span>), <span class="string">&quot;progress&quot;</span>, <span class="string">&quot;notify&quot;</span>],</span><br><span class="line">    ];</span><br><span class="line">    <span class="keyword">var</span> deferred = &#123;&#125;;</span><br><span class="line">    <span class="keyword">var</span> status = <span class="literal">true</span>;</span><br><span class="line">    dfArr.forEach(<span class="function">(<span class="params">ele, index</span>)=&gt;</span>&#123;</span><br><span class="line">      deferred[ele[<span class="number">1</span>]] = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>)</span>&#123;</span><br><span class="line">        ele[<span class="number">0</span>].add(fn);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    dfArr.forEach(<span class="function">(<span class="params">ele, index</span>)=&gt;</span>&#123;</span><br><span class="line">      deferred[ele[<span class="number">2</span>]] = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(status)&#123;</span><br><span class="line">          ele[<span class="number">0</span>].fire.apply(<span class="built_in">window</span>, <span class="built_in">arguments</span>);</span><br><span class="line">          status = ele[<span class="number">2</span>] === <span class="string">&quot;notify&quot;</span> ? <span class="literal">true</span> : <span class="literal">false</span>;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">return</span> deferred;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="3-co-解决回调地狱"><a href="#3-co-解决回调地狱" class="headerlink" title="3.co 解决回调地狱"></a>3.co 解决回调地狱</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> co = <span class="built_in">require</span>(<span class="string">&quot;co&quot;</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">readData</span>(<span class="params">path</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res, rej</span>) =&gt;</span> &#123;</span><br><span class="line">    fs.readFile(path, <span class="string">&quot;utf-8&quot;</span>, <span class="function">(<span class="params">err, data</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">if</span> (data) &#123;</span><br><span class="line">        res(data);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        rej(err);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// readData(&quot;./data/number.txt&quot;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return value;</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return readData(value);</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return readData(value);</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   console.log(value);</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">read</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> val1 = <span class="keyword">yield</span> readData(<span class="string">&quot;./data/number.txt&quot;</span>);</span><br><span class="line">  <span class="keyword">let</span> val2 = <span class="keyword">yield</span> readData(val1);</span><br><span class="line">  <span class="keyword">let</span> val3 = <span class="keyword">yield</span> readData(val2);</span><br><span class="line">  <span class="keyword">return</span> val3;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//生成器优化</span></span><br><span class="line"><span class="comment">/* function Co(oG)&#123;</span></span><br><span class="line"><span class="comment">  let &#123;value&#125; = oG.next();</span></span><br><span class="line"><span class="comment">  value.then(val1=&gt;&#123;</span></span><br><span class="line"><span class="comment">    let &#123;value&#125; = oG.next(val1);</span></span><br><span class="line"><span class="comment">    value.then(val2=&gt;&#123;</span></span><br><span class="line"><span class="comment">      let &#123;value&#125; = oG.next(val2);</span></span><br><span class="line"><span class="comment">      value.then(val3=&gt;&#123;</span></span><br><span class="line"><span class="comment">        console.log(val3);</span></span><br><span class="line"><span class="comment">      &#125;)</span></span><br><span class="line"><span class="comment">    &#125;)</span></span><br><span class="line"><span class="comment">  &#125;)</span></span><br><span class="line"><span class="comment">&#125; </span></span><br><span class="line"><span class="comment">Co(read());</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//递归优化</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Co</span>(<span class="params">oG</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res, rej</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> next = <span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">let</span> &#123; value, done &#125; = oG.next(data);</span><br><span class="line">      <span class="keyword">if</span> (done) &#123;</span><br><span class="line">        res(value);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        value.then(<span class="function"><span class="params">val</span> =&gt;</span> &#123;</span><br><span class="line">          next(val);</span><br><span class="line">        &#125;, rej);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">    next();</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line">Co(read()).then(<span class="function"><span class="params">value</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(value);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="4-async-await异步函数（ES7语法糖）"><a href="#4-async-await异步函数（ES7语法糖）" class="headerlink" title="4.async + await异步函数（ES7语法糖）"></a>4.async + await异步函数（ES7语法糖）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fs = <span class="built_in">require</span>(<span class="string">&quot;fs&quot;</span>);</span><br><span class="line"><span class="keyword">let</span> co = <span class="built_in">require</span>(<span class="string">&quot;co&quot;</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">readData</span>(<span class="params">path</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res, rej</span>) =&gt;</span> &#123;</span><br><span class="line">    fs.readFile(path, <span class="string">&quot;utf-8&quot;</span>, <span class="function">(<span class="params">err, data</span>)=&gt;</span>&#123;</span><br><span class="line">      <span class="keyword">if</span>(data)&#123;</span><br><span class="line">        res(data);</span><br><span class="line">      &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        rej(err);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// readData(&quot;./data/number.txt&quot;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return value;</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return readData(value);</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   return readData(value);</span></span><br><span class="line"><span class="comment">// &#125;).then((value)=&gt;&#123;</span></span><br><span class="line"><span class="comment">//   console.log(value);</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* function *read()&#123;</span></span><br><span class="line"><span class="comment">  let val1 = yield readData(&quot;./data/number.txt&quot;);</span></span><br><span class="line"><span class="comment">  let val2 = yield readData(val1);</span></span><br><span class="line"><span class="comment">  let val3 = yield readData(val2);</span></span><br><span class="line"><span class="comment">  return val3;</span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//生成器优化</span></span><br><span class="line"><span class="comment">/* function Co(oG)&#123;</span></span><br><span class="line"><span class="comment">  let &#123;value&#125; = oG.next();</span></span><br><span class="line"><span class="comment">  value.then(val1=&gt;&#123;</span></span><br><span class="line"><span class="comment">    let &#123;value&#125; = oG.next(val1);</span></span><br><span class="line"><span class="comment">    value.then(val2=&gt;&#123;</span></span><br><span class="line"><span class="comment">      let &#123;value&#125; = oG.next(val2);</span></span><br><span class="line"><span class="comment">      value.then(val3=&gt;&#123;</span></span><br><span class="line"><span class="comment">        console.log(val3);</span></span><br><span class="line"><span class="comment">      &#125;)</span></span><br><span class="line"><span class="comment">    &#125;)</span></span><br><span class="line"><span class="comment">  &#125;)</span></span><br><span class="line"><span class="comment">&#125; </span></span><br><span class="line"><span class="comment">Co(read());</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//递归优化</span></span><br><span class="line"><span class="comment">/* function Co(oG)&#123;</span></span><br><span class="line"><span class="comment">  return new Promise((res, rej)=&gt;&#123;</span></span><br><span class="line"><span class="comment">    let next = data=&gt;&#123;</span></span><br><span class="line"><span class="comment">      let &#123;value, done&#125; = oG.next(data);</span></span><br><span class="line"><span class="comment">      if(done)&#123;</span></span><br><span class="line"><span class="comment">        res(value);</span></span><br><span class="line"><span class="comment">      &#125;else&#123;</span></span><br><span class="line"><span class="comment">        value.then(val=&gt;&#123;</span></span><br><span class="line"><span class="comment">          next(val);</span></span><br><span class="line"><span class="comment">        &#125;, rej)</span></span><br><span class="line"><span class="comment">      &#125;</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">    next();</span></span><br><span class="line"><span class="comment">  &#125;)</span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment">Co( read() ).then(value=&gt;&#123;</span></span><br><span class="line"><span class="comment">  console.log(value)</span></span><br><span class="line"><span class="comment">&#125;)</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">read</span>(<span class="params">url</span>)</span>&#123;</span><br><span class="line">   <span class="keyword">try</span> &#123;</span><br><span class="line">     <span class="keyword">let</span> val1 = <span class="keyword">await</span> readData(url);</span><br><span class="line">     <span class="keyword">let</span> val2 = <span class="keyword">await</span> readData(val1);</span><br><span class="line">     <span class="keyword">let</span> val3 = <span class="keyword">await</span> readData(val2);</span><br><span class="line">     <span class="keyword">return</span> val3;</span><br><span class="line">   &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">     <span class="keyword">return</span> error;</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> read(<span class="string">&quot;./data/number.txt&quot;</span>).then(<span class="function"><span class="params">val</span>=&gt;</span>&#123;</span><br><span class="line">   <span class="built_in">console</span>.log(<span class="string">&quot;async ==&gt;&gt;&quot;</span> , val);</span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>
<hr>

      
      <!-- 打赏 -->
      
        <div id="reward-btn">
          打赏
        </div>
        
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/05/01/ES6a/" data-id="ckya9fc0w0008ygf68v6m0jqg"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/js-es6/" rel="tag">js es6</a></li></ul>

    </footer>

  </div>

  
  
  <nav class="article-nav">
    
      <a href="/blog/2018/05/15/ES6b/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            ES6 进阶
          
        </div>
      </a>
    
    
      <a href="/blog/2018/04/01/CSS3a/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">CSS3 初识</div>
      </a>
    
  </nav>


  

  
  
<!-- valine评论 -->
<div id="vcomments-box">
    <div id="vcomments">
    </div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>
<script>
    new Valine({
        el: '#vcomments',
        notify: false,
        verify: false,
        app_id: '',
        app_key: '',
        path: window.location.pathname,
        avatar: 'mp',
        placeholder: '给我的文章加点评论吧~',
        recordIP: true
    });
    const infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
        infoEle.childNodes.forEach(function (item) {
            item.parentNode.removeChild(item);
        });
    }
</script>
<style>
    #vcomments-box {
        padding: 5px 30px;
    }

    @media screen and (max-width: 800px) {
        #vcomments-box {
            padding: 5px 0px;
        }
    }

    #vcomments-box #vcomments {
        background-color: #fff;
    }

    .v .vlist .vcard .vh {
        padding-right: 20px;
    }

    .v .vlist .vcard {
        padding-left: 10px;
    }
</style>

  

  
  
  

</article>
</section>
      <footer class="footer">
  <div class="outer">
    <ul class="list-inline">
      <li>
        &copy;
        2020-2022
        Huafu Li
      </li>
      <li>
        
          Powered by
        
        
        <a href="https://hexo.io" target="_blank">Hexo</a> Theme <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul class="list-inline">
      <li>
        
        
        <ul class="list-inline">
  <li>PV:<span id="busuanzi_value_page_pv"></span></li>
  <li>UV:<span id="busuanzi_value_site_uv"></span></li>
</ul>
        
      </li>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
    <div class="to_top">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>
      </div>
    </main>
    
    <aside class="sidebar">
      
        <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/blog/"><img src="/blog/hu.png" alt="虎虎生辉"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/archives">目录</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/about">关于</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/pictures">相册</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/blog/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
      </aside>
      <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/alipay.png">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/wechat.png">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
      
<script src="/blog/js/jquery-2.0.3.min.js"></script>


<script src="/blog/js/jquery.justifiedGallery.min.js"></script>


<script src="/blog/js/lazyload.min.js"></script>


<script src="/blog/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/blog/fancybox/jquery.fancybox.min.js"></script>




  
<script src="/blog/js/tocbot.min.js"></script>

  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
			onClick: (e) => {
      	document.getElementById(e.target.innerText).scrollIntoView()
      	return false;
    	}
    });
  </script>


<script>
  var ayerConfig = {
    mathjax: false
  }
</script>


<script src="/blog/js/ayer.js"></script>


<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">



<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
  
  

  </div>
</body>

</html>